<script setup>
    defineProps({
        good:{
            type: Object,
            default: () => {
                return {}
            }
        }
    })
</script>


<template>
    <a href="javascript:;" class="good-item">
        <img v-img-lazy="good.picture" alt="">
        <div class="desc">
            <p class="name">{{good.name}}</p>
            <p class="word ellipsis">{{ good.desc }}</p>
            <span>{{good.price}}</span>
        </div>
    </a>
</template>


<style scoped lang="scss">
     .good-item{
        display: block;
        width: 220px;
        padding: 20px 30px;
        transition: all .5s;
        &:hover{
        transform: translate3d(0, -3px, 0);
        // 2D放大不适合
        // transform: scale(1, 1);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

        }
            img{
            width: 160px;
            height: 160px;
        }
        .desc{
            padding-top: 12px;
            text-align: center;
            .name{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
            }
            .word{
                color: #999;
                padding-top: 10px;
            }
            span{
                display: block;
                color: $priceColor;
                padding-top: 12px;
                font-size: 20px;
            }
        }
    }
</style>